<script setup>
import { ref, onMounted } from 'vue'
import { RouterLink } from 'vue-router'
import Sidebar from '../components/Sidebar.vue'
import AIChatbot from '../components/AIChatbot.vue'

const currentUser = ref(null)
const followedUsers = ref([])

// 检查用户登录状态
onMounted(() => {
  const user = localStorage.getItem('currentUser')
  if (user) {
    currentUser.value = JSON.parse(user)
  } else {
    // 设置默认用户信息，用于展示个人主页功能
    currentUser.value = {
      id: 10000,
      username: '用户151314584195',
      avatar: 'https://randomuser.me/api/portraits/men/32.jpg',
      name: '用户151314584195'
    }
  }
})

// 模拟游戏热度排行榜数据
const hotGames = [
  { id: 1, name: '赛博朋克 2077', popularity: 985600, change: '+12.5%', image: 'https://cdn.cloudflare.steamstatic.com/steam/apps/1091500/capsule_231x87.jpg' },
      { id: 2, name: '艾尔登法环', popularity: 876500, change: '+8.2%', image: 'https://cdn.cloudflare.steamstatic.com/steam/apps/1245620/capsule_231x87.jpg' },
      { id: 3, name: '死亡搁浅：导演剪辑版', popularity: 765400, change: '+5.2%', image: '/src/assets/死亡搁浅.jpeg' },
      { id: 4, name: 'CS2', popularity: 654300, change: '+5.7%', image: 'https://cdn.cloudflare.steamstatic.com/steam/apps/730/capsule_231x87.jpg' },
      { id: 5, name: '博德之门3', popularity: 543200, change: '+1.8%', image: 'https://cdn.cloudflare.steamstatic.com/steam/apps/1086940/capsule_231x87.jpg' },
      { id: 6, name: '星空', popularity: 432100, change: '-7.3%', image: 'https://cdn.cloudflare.steamstatic.com/steam/apps/1716740/capsule_231x87.jpg' },
      { id: 7, name: '赛博朋克 2077：自由幻局', popularity: 321000, change: '+23.8%', image: 'https://cdn.cloudflare.steamstatic.com/steam/apps/2220330/capsule_231x87.jpg' },
      { id: 8, name: '动物森友会', popularity: 210900, change: '-1.2%', image: 'https://cdn.cloudflare.steamstatic.com/steam/apps/1179380/capsule_231x87.jpg' },
      { id: 9, name: '塞尔达传说：王国之泪', popularity: 109800, change: '+4.5%', image: 'https://cdn.cloudflare.steamstatic.com/steam/apps/1708720/capsule_231x87.jpg' },
      { id: 10, name: '双人成行', popularity: 98700, change: '+2.1%', image: 'https://cdn.cloudflare.steamstatic.com/steam/apps/1426210/capsule_231x87.jpg' }
]

// 模拟评论数据
const mockComments = {
  1: [
    {
      id: 1,
      user: {
        name: '夜之城居民',
        avatar: 'https://randomuser.me/api/portraits/men/32.jpg',
        level: 25
      },
      content: '同意！伊德欧的剧情线真的很有深度，DLC的结局也很震撼。',
      time: '1小时前',
      likes: 45
    },
    {
      id: 2,
      user: {
        name: 'V的追随者',
        avatar: 'https://randomuser.me/api/portraits/women/44.jpg',
        level: 38
      },
      content: '已经通关了，确实值得一玩！新武器也很酷炫。',
      time: '30分钟前',
      likes: 23
    }
  ],
  2: [
    {
      id: 3,
      user: {
        name: '圆桌骑士',
        avatar: 'https://randomuser.me/api/portraits/men/55.jpg',
        level: 45
      },
      content: '恭喜！我也是卡了好久才过的，这个BOSS的连击太狠了。',
      time: '4小时前',
      likes: 67
    }
  ],
  3: [
    {
      id: 4,
      user: {
        name: 'UCA快递员',
        avatar: 'https://randomuser.me/api/portraits/men/22.jpg',
        level: 31
      },
      content: '竞速模式确实很有趣，但是难度也不低啊！',
      time: '昨天',
      likes: 18
    }
  ]
}

// 存储用户点赞的评论ID (格式: "postId_commentId")
const likedComments = ref([])

// 展开的评论区状态
const expandedComments = ref(new Set())

// 点赞动画状态
const likedAnimation = ref({})

// 模拟游戏帖子数据
const gamePosts = [
  {
    id: 1,
    user: {
      name: '夜之城传奇',
      avatar: 'https://randomuser.me/api/portraits/men/45.jpg',
      level: 38
    },
    game: {
      id: 1,
      name: '赛博朋克 2077',
      image: 'https://cdn.cloudflare.steamstatic.com/steam/apps/1091500/capsule_sm_120.jpg'
    },
    content: '《赛博朋克 2077》最新DLC"自由幻局"真的太香了！伊德欧·多洛斯这个角色塑造得太有深度了，新剧情也非常精彩，强烈推荐给所有夜之城的老玩家！',
    images: [
      '/src/assets/赛博朋克1.jpg',
      '/src/assets/赛博朋克2.jpg'
    ],
    time: '2小时前',
    likes: 568,
    comments: 124,
    shares: 36
  },
  {
    id: 2,
    user: {
      name: '褪色者',
      avatar: 'https://randomuser.me/api/portraits/women/28.jpg',
      level: 52
    },
    game: {
      id: 2,
      name: '艾尔登法环',
      image: 'https://cdn.cloudflare.steamstatic.com/steam/apps/1245620/capsule_sm_120.jpg'
    },
    content: '终于打败了女武神玛莲妮亚！这个BOSS的难度真的名不虚传，用了整整三天才通关。分享一下我的加点和装备搭配，希望能帮到还在卡关的朋友们。',
    images: [],
    time: '5小时前',
    likes: 789,
    comments: 256,
    shares: 89
  },
  {
    id: 3,
    user: {
      name: '布里吉斯山姆',
      avatar: 'https://randomuser.me/api/portraits/men/67.jpg',
      level: 65
    },
    game: {
        id: 3,
        name: '死亡搁浅：导演剪辑版',
        image: 'https://cdn.cloudflare.steamstatic.com/steam/apps/1850620/capsule_sm_120.jpg'
      },
      content: '《死亡搁浅：导演剪辑版》新增内容详细评测：竞速模式带来全新体验，新武器和载具让送货过程更加高效，强烈推荐给喜欢小岛秀夫作品的玩家！',
    images: [
      '/src/assets/死亡搁浅.jpeg'
    ],
    time: '昨天',
    likes: 1234,
    comments: 345,
    shares: 156
  }
]

// 模拟热门话题
const hotTopics = [
  { id: 1, name: '#赛博朋克2077自由幻局#', count: '12.5万' },
  { id: 2, name: '#艾尔登法环DLC#', count: '8.3万' },
  { id: 3, name: '#死亡搁浅导演剪辑版#', count: '6.7万' },
  { id: 4, name: '#CS2巴黎Major#', count: '5.2万' },
  { id: 5, name: '#博德之门3MOD#', count: '4.8万' }
]

// 背景游戏图片数组
const gameImages = [
  'https://cdn.cloudflare.steamstatic.com/steam/apps/1091500/header.jpg',
  'https://cdn.cloudflare.steamstatic.com/steam/apps/1245620/header.jpg',
  'https://cdn.cloudflare.steamstatic.com/steam/apps/1850620/header.jpg',
  'https://cdn.cloudflare.steamstatic.com/steam/apps/730/header.jpg',
  'https://cdn.cloudflare.steamstatic.com/steam/apps/1086940/header.jpg',
  'https://cdn.cloudflare.steamstatic.com/steam/apps/1716740/header.jpg',
  'https://cdn.cloudflare.steamstatic.com/steam/apps/2220330/header.jpg',
  'https://cdn.cloudflare.steamstatic.com/steam/apps/1179380/header.jpg',
  'https://cdn.cloudflare.steamstatic.com/steam/apps/1708720/header.jpg',
  'https://cdn.cloudflare.steamstatic.com/steam/apps/1426210/header.jpg',
  'https://cdn.cloudflare.steamstatic.com/steam/apps/1296610/header.jpg',
  'https://cdn.cloudflare.steamstatic.com/steam/apps/1938090/header.jpg'
]

// 滚动偏移量
const scrollOffset = ref(0)

// 监听滚动事件
onMounted(() => {
  const handleScroll = () => {
    scrollOffset.value = window.scrollY * 0.2
  }

  window.addEventListener('scroll', handleScroll)

  // 清理事件监听
  return () => {
    window.removeEventListener('scroll', handleScroll)
  }
})

// 存储用户点赞的帖子ID
const likedPosts = ref([])

// 从localStorage加载点赞状态
onMounted(() => {
  const savedLikedPosts = localStorage.getItem('likedPosts')
  if (savedLikedPosts) {
    likedPosts.value = JSON.parse(savedLikedPosts)
  }
  
  const savedLikedComments = localStorage.getItem('likedComments')
  if (savedLikedComments) {
    likedComments.value = JSON.parse(savedLikedComments)
  }
})

// 保存点赞状态到localStorage
const saveLikedPosts = () => {
  localStorage.setItem('likedPosts', JSON.stringify(likedPosts.value))
}

// 保存评论点赞状态到localStorage
const saveLikedComments = () => {
  localStorage.setItem('likedComments', JSON.stringify(likedComments.value))
}

// 帖子互动功能
const likePost = (postId) => {
  const post = gamePosts.find(p => p.id === postId)
  if (post) {
    // 检查是否已点赞
    const isLiked = likedPosts.value.includes(postId)
    
    if (isLiked) {
      // 取消点赞
      likedPosts.value = likedPosts.value.filter(id => id !== postId)
      post.likes = Math.max(0, post.likes - 1)
    } else {
      // 添加点赞
      likedPosts.value.push(postId)
      post.likes += 1
    }
    
    // 保存到localStorage
    saveLikedPosts()
  }
}

const commentPost = (postId) => {
  // 切换评论区显示状态
  if (expandedComments.value.has(postId)) {
    expandedComments.value.delete(postId)
  } else {
    expandedComments.value.add(postId)
  }
}

const sharePost = (postId) => {
  const post = gamePosts.find(p => p.id === postId)
  if (post) {
    post.shares += 1
  }
}

// 评论点赞功能
const likeComment = (postId, commentId) => {
  const comment = mockComments[postId]?.find(c => c.id === commentId)
  if (comment) {
    // 生成评论唯一标识
    const commentKey = `${postId}_${commentId}`
    
    // 检查是否已点赞
    const isLiked = likedComments.value.includes(commentKey)
    
    if (isLiked) {
      // 取消点赞
      likedComments.value = likedComments.value.filter(key => key !== commentKey)
      comment.likes = Math.max(0, comment.likes - 1)
    } else {
      // 添加点赞
      likedComments.value.push(commentKey)
      comment.likes += 1
    }
    
    // 保存到localStorage
    saveLikedComments()
  }
}

// 关注用户功能
const followUser = (postId) => {
  const post = gamePosts.find(p => p.id === postId)
  if (post && post.user) {
    // 检查是否已关注该用户
    const isAlreadyFollowed = followedUsers.value.some(user => user.name === post.user.name)
    
    if (isAlreadyFollowed) {
      // 取消关注
      followedUsers.value = followedUsers.value.filter(user => user.name !== post.user.name)
    } else {
      // 添加关注
      followedUsers.value.push({
        ...post.user,
        id: Date.now() // 为每个关注的用户添加唯一ID
      })
    }
  }
}
</script>

<template>
  <div class="xiaobaihe">
    <!-- 背景网格容器 -->
    <div class="bg-grid-container" :style="{transform: `translateY(-${scrollOffset}px)`}">
      <div v-for="(img, index) in gameImages" :key="index"
           class="bg-grid-item"
           :style="{backgroundImage: `url(${img})`}">
      </div>
    </div>

    <!-- 渐变覆盖层 -->
    <div class="bg-gradient-overlay"></div>
    <!-- 主要内容区域 -->
    <main class="content">
      <!-- 左侧边栏 -->
      <aside class="sidebar left-sidebar">
        <div v-if="currentUser" class="user-profile">
          <img :src="currentUser.avatar" :alt="currentUser.name" class="profile-avatar" />
          <div class="profile-info">
            <h3>{{ currentUser.name }}</h3>
            <p>等级 1</p>
          </div>
          <div class="profile-stats">
            <div class="stat-item">
              <span class="stat-number">{{ followedUsers.length }}</span>
              <span class="stat-label">关注</span>
            </div>
            <div class="stat-item">
              <span class="stat-number">0</span>
              <span class="stat-label">粉丝</span>
            </div>
          </div>
          
          <!-- 已关注用户列表 -->
          <div v-if="followedUsers.length > 0" class="followed-users">
            <h4>我的关注</h4>
            <div class="followed-user-list">
              <div v-for="user in followedUsers" :key="user.id" class="followed-user-item">
                <img :src="user.avatar" :alt="user.name" class="followed-user-avatar" />
                <div class="followed-user-info">
                  <span class="followed-user-name">{{ user.name }}</span>
                  <span class="followed-user-level">Lv.{{ user.level }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-else class="login-prompt">
          <p>请先登录以使用完整功能</p>
          <button class="login-btn" @click="goToLogin">立即登录</button>
        </div>

        <div class="quick-links">
          <h4>我的游戏</h4>
          <ul class="links-list">
            <li class="link-item">
              <RouterLink to="/game/1" class="link">最近游玩</RouterLink>
            </li>
            <li class="link-item">
              <RouterLink to="/game/1" class="link">愿望单</RouterLink>
            </li>
            <li class="link-item">
              <RouterLink to="/game/1" class="link">游戏收藏</RouterLink>
            </li>
            <li class="link-item">
              <RouterLink to="/game/1" class="link">成就墙</RouterLink>
            </li>
          </ul>
        </div>

        <div class="hot-topics">
          <h4>热门话题</h4>
          <ul class="topics-list">
            <li class="topic-item" v-for="topic in hotTopics" :key="topic.id">
              <a href="#" class="topic-link">{{ topic.name }}</a>
              <span class="topic-count">{{ topic.count }}</span>
            </li>
          </ul>
        </div>
      </aside>

      <!-- 中间内容区 -->
      <section class="main-content">
        <!-- 发布框 -->
        <div v-if="currentUser" class="post-box">
          <img :src="currentUser.avatar" :alt="currentUser.name" class="post-avatar" />
          <div class="post-input-container">
            <textarea placeholder="分享你的游戏体验..." class="post-input"></textarea>
            <div class="post-actions">
              <button class="action-icon">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                  <circle cx="8.5" cy="8.5" r="1.5"></circle>
                  <polyline points="21 15 16 10 5 21"></polyline>
                </svg>
                图片
              </button>
              <button class="action-icon">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
                  <path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path>
                  <path d="M19.07 4.93a10 10 0 0 1 0 14.14"></path>
                </svg>
                游戏
              </button>
              <button class="action-icon">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
                  <polyline points="22 4 12 14.01 9 11.01"></polyline>
                </svg>
                视频
              </button>
              <button class="post-submit-btn">发布</button>
            </div>
          </div>
        </div>

        <!-- 游戏动态列表 -->
        <div class="posts-list">
          <div class="post" v-for="post in gamePosts" :key="post.id">
            <div class="post-header">
              <img :src="post.user.avatar" :alt="post.user.name" class="post-user-avatar" />
              <div class="post-user-info">
                <div class="user-name-container">
                  <span class="user-name">{{ post.user.name }}</span>
                  <span class="user-level">Lv.{{ post.user.level }}</span>
                </div>
                <div class="post-meta">
                  <RouterLink :to="`/game/${post.game.id}`" class="game-tag">
                    <img :src="post.game.image" :alt="post.game.name" class="game-icon" />
                    {{ post.game.name }}
                  </RouterLink>
                  <span class="post-time">{{ post.time }}</span>
                </div>
              </div>
              <button 
                class="follow-post-user-btn" 
                :class="{ 'followed': followedUsers.some(user => user.name === post.user.name) }"
                @click="followUser(post.id)"
              >
                {{ followedUsers.some(user => user.name === post.user.name) ? '已关注' : '关注' }}
              </button>
              <button class="more-btn">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <circle cx="12" cy="12" r="1"></circle>
                  <circle cx="19" cy="12" r="1"></circle>
                  <circle cx="5" cy="12" r="1"></circle>
                </svg>
              </button>
            </div>

            <div class="post-content">
              <p>{{ post.content }}</p>

              <div v-if="post.images.length > 0" class="post-images">
                <img v-for="(img, index) in post.images" :key="index" :src="img" :alt="`帖子图片${index + 1}`" class="post-image" />
              </div>
            </div>

            <div class="post-stats">
              <button class="stat-btn" @click="likePost(post.id)" :class="{ 'liked': likedPosts.includes(post.id) }">
                <svg width="16" height="16" viewBox="0 0 24 24" :fill="likedPosts.includes(post.id) ? 'currentColor' : 'none'" stroke="currentColor" stroke-width="2">
                  <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
                </svg>
                {{ post.likes }}
              </button>
              <button class="stat-btn" @click="commentPost(post.id)" :class="{ 'active': expandedComments.has(post.id) }">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path>
                </svg>
                {{ post.comments }}
              </button>
              <button class="stat-btn" @click="sharePost(post.id)">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                  <circle cx="18" cy="5" r="3"></circle>
                  <circle cx="6" cy="12" r="3"></circle>
                  <circle cx="18" cy="19" r="3"></circle>
                  <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line>
                  <line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line>
                </svg>
                {{ post.shares }}
              </button>
            </div>
            
            <!-- 评论区域 -->
            <div v-if="expandedComments.has(post.id)" class="post-comments">
              <div class="comments-list">
                <div v-for="comment in mockComments[post.id]" :key="comment.id" class="comment-item">
                  <img :src="comment.user.avatar" :alt="comment.user.name" class="comment-avatar" />
                  <div class="comment-content">
                    <div class="comment-header">
                      <div class="comment-user-info">
                        <span class="comment-user">{{ comment.user.name }}</span>
                        <span class="comment-level">Lv.{{ comment.user.level }}</span>
                        <span class="comment-time">{{ comment.time }}</span>
                      </div>
                      <button class="comment-like-btn" @click="likeComment(post.id, comment.id)" :class="{ 'liked': likedComments.includes(`${post.id}_${comment.id}`) }">
                        <svg width="14" height="14" viewBox="0 0 24 24" :fill="likedComments.includes(`${post.id}_${comment.id}`) ? 'currentColor' : 'none'" stroke="currentColor" stroke-width="2">
                          <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
                        </svg>
                        {{ comment.likes }}
                      </button>
                    </div>
                    <p class="comment-text">{{ comment.content }}</p>
                  </div>
                </div>
              </div>
              
              <!-- 评论输入框 -->
              <div class="comment-input-container">
                <img :src="currentUser?.avatar || 'https://randomuser.me/api/portraits/men/32.jpg'" alt="Your avatar" class="comment-input-avatar" />
                <input type="text" placeholder="添加评论..." class="comment-input" />
                <button class="comment-submit-btn">发送</button>
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 右侧边栏 -->
      <aside class="sidebar right-sidebar">
        <!-- 使用侧边栏组件显示游戏热度榜 -->
        <Sidebar :hot-games="hotGames" title="游戏热度榜" />
        
        <!-- 推荐关注 -->
        <div class="suggested-follows">
          <div class="section-header">
            <h3>推荐关注</h3>
            <a href="#" class="more-link">换一批</a>
          </div>
          <div class="follows-list">
            <div class="follow-item">
              <img src="https://randomuser.me/api/portraits/men/23.jpg" alt="游戏主播" class="follow-avatar" />
              <div class="follow-info">
                <h4>游戏主播小明</h4>
                <p>游戏直播达人</p>
              </div>
              <button class="follow-btn">关注</button>
            </div>
            <div class="follow-item">
              <img src="https://randomuser.me/api/portraits/women/45.jpg" alt="游戏测评师" class="follow-avatar" />
              <div class="follow-info">
                <h4>游戏测评师小莉</h4>
                <p>专业游戏评测</p>
              </div>
              <button class="follow-btn">关注</button>
            </div>
            <div class="follow-item">
              <img src="https://randomuser.me/api/portraits/men/56.jpg" alt="游戏开发者" class="follow-avatar" />
              <div class="follow-info">
                <h4>独立游戏开发者老王</h4>
                <p>分享游戏开发经验</p>
              </div>
              <button class="follow-btn">关注</button>
            </div>
          </div>
        </div>
      </aside>
    </main>

    <!-- 底部区域 -->
    <footer class="footer">
      <div class="footer-content">
        <div class="footer-links">
          <a href="#" class="footer-link">关于我们</a>
          <a href="#" class="footer-link">使用条款</a>
          <a href="#" class="footer-link">隐私政策</a>
          <a href="#" class="footer-link">帮助中心</a>
          <a href="#" class="footer-link">联系我们</a>
        </div>
        <p class="copyright">© 2024 小白盒游戏社区. 版权所有</p>
      </div>
    </footer>
  </div>
    <!-- AI聊天机器人组件 -->
    <AIChatbot />
  </template>

<style scoped>
.stat-btn.liked {
  color: #ff4757;
}
.stat-btn.active {
  color: #5352ed;
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.comment-user-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.comment-like-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: transparent;
  border: 1px solid #333;
  border-radius: 12px;
  font-size: 12px;
  color: #888;
  cursor: pointer;
  transition: all 0.2s;
}

.comment-like-btn:hover {
  background: rgba(255, 71, 87, 0.1);
  border-color: rgba(255, 71, 87, 0.3);
  color: #ff4757;
}

.comment-like-btn.liked {
  background: rgba(255, 71, 87, 0.1);
  border-color: #ff4757;
  color: #ff4757;
}

/* 评论区域样式 */
.post-comments {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  animation: slideDown 0.3s ease-out;
  overflow: hidden;
}

/* 动画效果 */
@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
    padding-top: 0;
  }
  to {
    opacity: 1;
    max-height: 2000px;
    padding-top: 16px;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 帖子淡入动画 */
.post {
  animation: fadeIn 0.4s ease-out;
}

.post:nth-child(1) {
  animation-delay: 0.1s;
}

.post:nth-child(2) {
  animation-delay: 0.2s;
}

.post:nth-child(3) {
  animation-delay: 0.3s;
}

/* 评论项滑动动画 */
.comment-item {
  animation: slideIn 0.3s ease-out;
}

.comment-item:nth-child(1) {
  animation-delay: 0.1s;
}

.comment-item:nth-child(2) {
  animation-delay: 0.2s;
}

.comment-item:nth-child(3) {
  animation-delay: 0.3s;
}

/* 点赞脉冲动画 */
.like-animation {
  animation: pulse 0.3s ease-out;
}

/* 按钮交互动画 */
.stat-btn, .comment-like-btn, .follow-btn, .post-submit-btn, .comment-submit-btn {
  transition: all 0.2s ease;
}

.stat-btn:active, .comment-like-btn:active, .follow-btn:active, .post-submit-btn:active, .comment-submit-btn:active {
  transform: scale(0.95);
}

/* 卡片悬停效果 */
.post, .user-profile, .quick-links, .hot-topics, .post-box {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.post:hover, .user-profile:hover, .quick-links:hover, .hot-topics:hover, .post-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

/* 导航链接动画 */
.link, .topic-link {
  position: relative;
  display: inline-block;
  transition: all 0.3s ease;
}

.link::after, .topic-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: #ff4757;
  transition: width 0.3s ease;
}

.link:hover::after, .topic-link:hover::after {
  width: 100%;
}

/* 滚动渐变背景 */
.bg-gradient-overlay {
  background: linear-gradient(to bottom, rgba(18, 18, 18, 0.95), rgba(26, 26, 26, 0.8));
  transition: background 0.5s ease;
}

.comments-list {
  margin-bottom: 16px;
}

.comment-item {
  display: flex;
  margin-bottom: 16px;
}

.comment-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-right: 12px;
}

.comment-content {
  flex: 1;
}

.comment-header {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

.comment-user {
  font-weight: 600;
  margin-right: 8px;
}

.comment-level {
  font-size: 12px;
  color: #999;
  margin-right: 8px;
}

.comment-time {
  font-size: 12px;
  color: #666;
}

.comment-text {
  color: #e0e0e0;
  line-height: 1.5;
}

/* 评论输入框样式 */
.comment-input-container {
  display: flex;
  align-items: center;
}

.comment-input-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-right: 12px;
}

.comment-input {
  flex: 1;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 8px 16px;
  color: #fff;
  outline: none;
  transition: all 0.3s;
}

.comment-input:focus {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

.comment-submit-btn {
  background: #5352ed;
  color: white;
  border: none;
  border-radius: 20px;
  padding: 8px 16px;
  margin-left: 8px;
  cursor: pointer;
  transition: background 0.3s;
}

.comment-submit-btn:hover {
  background: #3742fa;
}
/* 全局样式 */
.xiaobaihe {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background-color: #121212;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: #ffffff;
  position: relative;
  overflow-x: hidden;
}

/* 背景网格容器 */
.bg-grid-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 120%;
  transform: translateX(-10%) translateY(-10%) rotate(45deg);
  z-index: -1;
  opacity: 0.3;
}

/* 背景网格项 */
.bg-grid-item {
  position: absolute;
  width: 240px;
  height: 240px;
  background-size: cover;
  background-position: center;
  transform: rotate(45deg);
  opacity: 0.5;
  transition: opacity 0.3s;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

/* 为背景网格项设置不同位置 */
.bg-grid-item:nth-child(1) { top: 0; left: 0; }
.bg-grid-item:nth-child(2) { top: 0; left: 200px; }
.bg-grid-item:nth-child(3) { top: 0; left: 400px; }
.bg-grid-item:nth-child(4) { top: 200px; left: 0; }
.bg-grid-item:nth-child(5) { top: 200px; left: 200px; }
.bg-grid-item:nth-child(6) { top: 200px; left: 400px; }
.bg-grid-item:nth-child(7) { top: 400px; left: 0; }
.bg-grid-item:nth-child(8) { top: 400px; left: 200px; }
.bg-grid-item:nth-child(9) { top: 400px; left: 400px; }
.bg-grid-item:nth-child(10) { top: 600px; left: 0; }
.bg-grid-item:nth-child(11) { top: 600px; left: 200px; }
.bg-grid-item:nth-child(12) { top: 600px; left: 400px; }

.bg-grid-item:hover {
  opacity: 0.8;
}

/* 渐变覆盖层 */
.bg-gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, #0a0a0a, #1a1a1a);
  z-index: -1;
}

/* 顶部导航栏 */
.header {
  background: rgba(18, 18, 18, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
}

.logo {
  font-size: 24px;
  font-weight: bold;
  color: #e6162d;
  margin-right: 30px;
}

.main-nav {
  display: flex;
  gap: 20px;
}

.nav-item {
  color: #ffffff;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  padding: 8px 0;
  position: relative;
}

.nav-item.active {
  color: #e6162d;
}

.nav-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #e6162d;
}

.search-container {
  flex: 1;
  max-width: 500px;
  margin: 0 20px;
}

.search-box {
  display: flex;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 0 15px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 14px;
  color: #ffffff;
}

.search-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: #cccccc;
  padding: 0 5px;
}

.post-btn {
  background-color: #e6162d;
  color: white;
  border: none;
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  margin-right: 15px;
  transition: background-color 0.3s;
}

.post-btn:hover {
  background-color: #c01125;
}

/* 右侧导航栏布局 */
.right-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-avatar-container {
  display: flex;
  align-items: center;
}

/* 功能图标按钮样式 */
.btn-icon {
  background: none;
  border: none;
  color: #cccccc;
  padding: 8px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
  margin-right: 5px;
}

.btn-icon:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

/* 通知徽章样式 */
.badge {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #e6162d;
  color: white;
  font-size: 10px;
  padding: 2px 5px;
  border-radius: 10px;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.user-avatar img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
}

/* 主要内容区域 */
.content {
  flex: 1;
  max-width: 1200px;
  margin: 20px auto;
  width: 100%;
  display: flex;
  gap: 20px;
  padding: 0 20px;
}

/* 左侧边栏 */
.sidebar {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 8px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.left-sidebar {
  width: 260px;
  flex-shrink: 0;
}

.user-profile {
  text-align: center;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 20px;
}

.profile-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 10px;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.profile-info h3 {
  margin: 0 0 5px 0;
  color: #ffffff;
}

.profile-info p {
  margin: 0 0 15px 0;
  color: #cccccc;
  font-size: 14px;
}

.profile-stats {
  display: flex;
  justify-content: space-around;
}

.stat-item {
  text-align: center;
}

.stat-number {
  display: block;
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
}

.stat-label {
  font-size: 12px;
  color: #999;
}

.quick-links h4,
.hot-topics h4 {
  font-size: 16px;
  margin: 0 0 15px 0;
  color: #ffffff;
}

.links-list,
.topics-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}

.link-item,
.topic-item {
  margin-bottom: 10px;
}

.link-item:last-child,
.topic-item:last-child {
  margin-bottom: 0;
}

.link,
.topic-link {
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.3s;
}

.link:hover,
.topic-link:hover {
  color: #e6162d;
}

.topic-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.topic-count {
  font-size: 12px;
  color: #999;
}

/* 中间内容区 */
.main-content {
  flex: 1;
  max-width: 600px;
}

.post-box {
  background-color: rgba(128, 128, 128, 0.2);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  display: flex;
  gap: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.post-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
}

.post-input-container {
  flex: 1;
}

.post-input {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 10px;
  resize: none;
  font-size: 14px;
  line-height: 1.5;
  color: #ffffff;
  min-height: 80px;
  outline: none;
  background-color: rgba(255, 255, 255, 0.05);
}

.post-input:focus {
  border-color: #e6162d;
}

.post-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.action-icon {
  background: none;
  border: none;
  cursor: pointer;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  padding: 5px 10px;
  border-radius: 4px;
  transition: background-color 0.3s, color 0.3s;
}

.action-icon:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #e6162d;
}

.post-submit-btn {
  background-color: #e6162d;
  color: white;
  border: none;
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s;
}

.post-submit-btn:hover {
  background-color: #c01125;
}

/* 游戏动态列表 */
.posts-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.post {
  background-color: rgba(128, 128, 128, 0.2);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.post-header {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 15px;
}

.post-user-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
}

.post-user-info {
  flex: 1;
}

.user-name-container {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}

.user-name {
  font-weight: bold;
  color: #ffffff;
}

.user-level {
  font-size: 12px;
  color: #e6162d;
  background-color: rgba(255, 255, 255, 0.1);
  padding: 2px 6px;
  border-radius: 10px;
}

.post-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #cccccc;
}

.game-tag {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #e6162d;
  text-decoration: none;
}

.game-icon {
  width: 16px;
  height: 16px;
  border-radius: 2px;
}

.follow-post-user-btn {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 5px 15px;
  border-radius: 15px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s;
}

.follow-post-user-btn:hover:not(.followed) {
  background-color: #e6162d;
  color: white;
  border-color: #e6162d;
}

.follow-post-user-btn.followed {
  background-color: #333333;
  color: #999999;
  border-color: #444444;
}

.follow-post-user-btn.followed:hover {
  background-color: #444444;
}

/* 已关注用户列表样式 */
.followed-users {
  margin-top: 20px;
  padding: 15px;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
}

.followed-users h4 {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: #ffffff;
}

.followed-user-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.followed-user-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
}

.followed-user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.followed-user-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.followed-user-name {
  font-size: 13px;
  font-weight: 500;
  color: #ffffff;
}

.followed-user-level {
  font-size: 11px;
  color: #e6162d;
}

.more-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #999;
  padding: 5px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.more-btn:hover {
  background-color: #f5f6f7;
}

.post-content {
  margin-bottom: 15px;
}

.post-content p {
  margin: 0 0 10px 0;
  line-height: 1.6;
  color: #ffffff;
}

.post-images {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.post-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.post-stats {
  display: flex;
  gap: 20px;
  padding-top: 15px;
  border-top: 1px solid #f0f0f0;
}

.stat-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #cccccc;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  transition: color 0.3s;
}

.stat-btn:hover {
  color: #e6162d;
}

/* 右侧边栏 */
.right-sidebar {
  width: 300px;
  flex-shrink: 0;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.section-header h3 {
  font-size: 16px;
  margin: 0;
  color: #ffffff;
}

.more-link {
  color: #999;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.3s;
}

.more-link:hover {
  color: #e6162d;
}



/* 推荐关注 */
.follows-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.follow-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.follow-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.follow-info {
  flex: 1;
  min-width: 0;
}

.follow-info h4 {
  margin: 0 0 2px 0;
  font-size: 14px;
  color: #ffffff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.follow-info p {
  margin: 0;
  font-size: 12px;
  color: #cccccc;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.follow-btn {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 5px 15px;
  border-radius: 15px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s;
}

.follow-btn:hover {
  background-color: #e6162d;
  color: white;
  border-color: #e6162d;
}

/* 用户头像容器 - 用于悬浮窗定位 */
.user-avatar-container {
  position: relative;
}

.user-avatar img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.2s;
}

.user-avatar img:hover {
  transform: scale(1.1);
}

/* 用户悬浮窗样式 */
.user-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 10px;
  width: 240px;
  background: rgba(18, 18, 18, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  z-index: 1001;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.user-avatar-container:hover .user-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* 悬浮窗头部 */
.dropdown-header {
  padding: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  gap: 12px;
}

.dropdown-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.dropdown-info .username {
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 4px;
}

.dropdown-info .user-level {
  font-size: 12px;
  color: #e6162d;
  background-color: #fee7e9;
  padding: 2px 6px;
  border-radius: 10px;
  display: inline-block;
}

/* 等级条样式 */
.level-bar-container {
  margin-top: 8px;
}

.level-label {
  font-size: 12px;
  color: #cccccc;
  display: block;
  margin-bottom: 4px;
}

.level-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.level-progress {
  height: 100%;
  background-color: #888;
  border-radius: 3px;
}

.level-text {
  font-size: 10px;
  color: #cccccc;
  float: right;
  margin-top: 2px;
}

/* 统计按钮区域样式 */
.stats-container {
  display: flex;
  justify-content: space-around;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-item {
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}

.stat-item:hover {
  transform: translateY(-2px);
}

.stat-number {
  display: block;
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
}

.stat-label {
  display: block;
  font-size: 12px;
  color: #cccccc;
  margin-top: 2px;
}

/* 悬浮窗菜单 */
.dropdown-menu {
  padding: 8px 0;
  display: flex;
  flex-wrap: wrap;
}

/* 两列布局样式 */
.menu-grid {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
  transition: background-color 0.2s;
  box-sizing: border-box;
}

.menu-grid .menu-item {
  width: 50%;
}

/* 确保退出登录按钮和分割线在两列布局中正确显示 */
.menu-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 8px 0;
  width: 100%;
}

.menu-item.logout {
  color: #e6162d;
  width: 100%;
}

.menu-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.menu-icon {
  font-size: 16px;
  width: 16px;
  text-align: center;
  color: #cccccc;
}

.menu-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 8px 0;
}

.menu-item.logout {
  color: #e6162d;
}

.menu-item.logout:hover {
  background: rgba(230, 22, 45, 0.1);
}

/* 登录按钮样式 */
.login-btn {
  background-color: #e6162d;
  color: white;
  border: none;
  padding: 8px 20px;
  border-radius: 15px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.login-btn:hover {
  background-color: #c21327;
}

/* 登录提示样式 */
.login-prompt {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  margin-bottom: 20px;
}

.login-prompt p {
  margin: 0 0 15px 0;
  color: #666;
}

/* 底部区域 */
.footer {
  background: rgba(18, 18, 18, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: 20px 0;
  margin-top: auto;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.footer-link {
  color: #cccccc;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.3s;
}

.footer-link:hover {
  color: #e6162d;
}

.copyright {
  color: #888;
  font-size: 12px;
  margin: 0;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .left-sidebar {
    display: none;
  }

  .main-nav {
    display: none;
  }
}

@media (max-width: 768px) {
  .content {
    flex-direction: column;
  }

  .right-sidebar {
    width: 100%;
    margin-top: 20px;
  }

  .search-container {
    display: none;
  }

  .post-images {
    grid-template-columns: 1fr;
  }
}
</style>
